<template>
    <div class="cont">
        <!-- <div style="color:#fff">{{count}}</div> -->
        <img class="position-lmd1 position" v-show="lmd" @click="daqiao1" src="../../assets/img/daqiao1.png" alt="" />
        <img class="position-lmd2 position" v-show="lmd1" @click="daqiao2" src="../../assets/img/daqiao2.png" alt="" />
        <img class="position-lmd3 position" v-show="lmd2" @click="daqiao3" src="../../assets/img/daqiao3.png" alt="" />
        <!--        大桥-->
        <div class="bgflexc position" v-show="showA" style="background-position: right center">
            <div>
                <div class="kuai_text" style="font-size: 30px; color: #ffffff">总进度</div>
                <div class="kuai_text" v-if="count_3 != 'NaN'">{{ count_3 }}%</div>
                <div class="kuai_text" v-else>0%</div>
            </div>
        </div>

        <!-- <iframe
            src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/F58891617/1.hd.live&accessToken=at.7nn0vzrtadpfolcwc1hdyn8o9nyf376a-1hquo524f8-18jkcad-sra5kyb1f"
            width="600"
            height="400"
            id="ysOpenDevice"
            allowfullscreen
        >
        </iframe> -->
        <div class="main">
            <div @click="dianj1('兰考特大桥')" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <div class="wenz">兰考特大桥</div>
            </div>
            <div @click="dianj2('右绕线特大桥')" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <div class="wenz">右绕线特大桥</div>
            </div>
            <div @click="dianj3('左绕线特大桥')" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <div class="wenz">左绕线特大桥</div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination

import waves from '@/directive/waves';
import ajax from '@/utils/myajax';

export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            lmd: false,
            lmd1: false,
            lmd2: false,
            showA: false,
            count_1: '',
            count: 0,
            count_3: ''
        };
    },
    methods: {
        dianj2(name) {
            this.count = 2;
            this.showA = true;
            this.getCount_BridgePier_percentage(name);
        },
        dianj1(name) {
            this.count = 1;
            this.showA = true;
            this.getCount_BridgePier_percentage(name);
        },
        dianj3(name) {
            this.count = 3;
            this.showA = true;
            this.getCount_BridgePier_percentage(name);
        },
        /**
         * 获取大桥进度
         * */
        getCount_BridgePier_percentage(name) {
            let section_id = localStorage.getItem('section_id');
            ajax(
                'Schedule/Count_BridgePier_percentage',
                {
                    section_id: section_id,
                    bridge_name: name
                },
                (data) => {
                    this.count_3 = data;
                    this.count_3 = parseFloat(this.count_3);
                    this.count_3 = this.count_3.toFixed(2);
                }
            );
        },
        daqiao1() {
            // console.log(this.lmd);
            // //    if(lmd)
            var id = 2;
            this.$router.push({ path: '/jdall', query: { id: id } });
        },
        daqiao2() {
            // console.log(this.lmd);
            // //    if(lmd)
            var id = 3;
            this.$router.push({ path: '/jdall', query: { id: id } });
        },
        daqiao3() {
            // console.log(this.lmd);
            // //    if(lmd)
            var id = 1;
            this.$router.push({ path: '/jdall', query: { id: id } });
        }
    },
    watch: {
        count(count) {
            console.log(count);
            if (count == 2) {
                this.lmd = true;
            }
            if (count != 2) {
                this.lmd = false;
            }
            if (count == 1) {
                this.lmd1 = true;
            }
            if (count != 1) {
                this.lmd1 = false;
            }
            if (count == 3) {
                this.lmd2 = true;
            }
            if (count != 3) {
                this.lmd2 = false;
            }
        }
    },
    mounted() {}
};
</script>

<style scoped>
.position {
    /* width: 30px;
        height: 30px; */
    position: absolute;
}

.position-lmd1 {
    top: 240px;
    left: 368px;
}

.position-lmd2 {
    top: 159px;
    left: 682px;
}

.position-lmd3 {
    top: 254px;
    left: 223px;
}

.bgflexc {
    /*position: relative;*/
    top: -80px;
    right: 20px;
    width: 310px;
    padding-top: 100px;
    height: 215px;
    background: url(../../assets/img/addyuan.png) no-repeat center center;
}

.bigq {
    margin-left: 10px;
    margin-top: 7px;
    float: left;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
}

.wenz {
    width: 100px;
    margin-left: 10px;
    height: 20px;
    margin-top: 5px;
    line-height: 20px;
    text-align: left;
    float: left;
    color: #ffffff;
    font-size: 16px;
}

.smallq {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(3, 3, 3);
    position: relative;
    top: 2px;
    left: 2px;
}

.small {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    top: 2px;
    left: 2px;
}

.cont {
    position: relative;
    /* padding-top: 64px; */
    width: 100%;
    height: 100%;
    background: url(../../assets/img/daqiao4.png) no-repeat;
    background-size: 100% 100%;
    /* display: flex;
    justify-content: space-around; */
}

.tit1 {
    cursor: pointer;
    margin-top: 7px;
    width: 141px;
    height: 30px;
    /* opacity: 0.37; */
    /* background: #010d27; */
    border: 1px solid #14fffc;
    border-radius: 4px;
}

.kuai_text {
    font-size: 55px;
    font-weight: 400;
    text-align: center;
    color: #0cc0fc;
}
.iframe-btn-container {
    display: none;
}
</style>
